<template>
  <div class="parse-page">
    <a-card class="upload-card" title="文件协议解析助手">
      <div class="upload-section">
        <a-upload
          :show-upload-list="false"
          :before-upload="beforeUpload"
          accept=".pdf,.doc,.docx,.txt"
        >
          <a-button type="primary" icon="upload">上传文件</a-button>
        </a-upload>
      </div>
      <div v-if="!fileName" class="empty-tip">
        <a-empty description="请上传需要解析的协议或合同文件" />
      </div>
      <div v-if="fileName" class="file-info">
        <a @click="previewFile" style="cursor:pointer; color:#1890ff; text-decoration:underline;">{{ fileName }}</a>
      </div>
      <a-divider />
      <div v-if="fileName" class="result-box">
        <h3>详细解析结果</h3>
        <a-list bordered :data-source="resultList">
          <template #renderItem="{ item }">
            <a-list-item>
              <b>{{ item.title }}：</b>{{ item.content }}
              <div v-if="item.detail" class="item-detail">{{ item.detail }}</div>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <a-modal v-model:visible="previewVisible" title="文件内容预览" :footer="null" width="700px">
        <pre class="file-preview-content">{{ fileContent }}</pre>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const fileName = ref('')
const resultList = ref([])
const previewVisible = ref(false)
const fileContent = ref('')

function beforeUpload(file) {
  fileName.value = file.name
  // 静态模拟文件内容
  fileContent.value = `【${file.name}】
甲方：张三
乙方：李四
1. 合同标的：软件开发服务
2. 服务期限：2025年8月-2026年8月
3. 付款方式：分阶段支付
4. 违约责任：如有违约，违约方需承担全部损失。
5. 争议解决：协商不成时，提交甲方所在地法院诉讼。
...`
  // 更详细的静态解析内容
  resultList.value = [
    { title: '关键条款', content: '约定了合同标的、服务期限、付款方式、违约责任、争议解决等。', detail: '如第4条，违约责任明确由违约方承担全部损失；第5条，争议解决方式为法院诉讼。' },
    { title: '风险提示', content: '需关注违约责任条款及付款节点安排。', detail: '如付款分阶段，建议明确每阶段验收标准，避免因验收争议导致付款纠纷。' },
    { title: '注意事项', content: '核查合同主体、签署日期、附件完整性。', detail: '建议双方签字盖章，附件如有技术文档需一并列明。' },
    { title: '法律因素', content: '涉及《合同法》《民法典》相关规定。', detail: '如合同标的、违约责任、争议解决等均应符合法律规定，建议有疑问时咨询律师。' }
  ]
  return false
}
function previewFile() {
  previewVisible.value = true
}
</script>
<script>
export default {
  name: 'ProtocolParse'
}
</script>

<style scoped>
.parse-page {
  max-width: 800px;
  margin: 60px auto;
}
.upload-card {
  min-height: 400px;
  background: #f7faff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6f7ff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 16px 0;
}
.file-info {
  color: #1890ff;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: center;
}
.result-box {
  margin-top: 24px;
}
.empty-tip {
  margin: 32px 0 24px 0;
  text-align: center;
}
.file-preview-content {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 18px;
  font-size: 15px;
  color: #333;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}
.item-detail {
  color: #888;
  font-size: 13px;
  margin-top: 6px;
}
</style>